import React from 'react';
import TreeEnhance from "../../../common/tree/TreeEnhance";
import {useLocation} from "react-router-dom";
import {SecurityRole} from "../../../type/entity/SecurityRole";
import {Space, Tag, TreeDataNode} from "antd";
import {getMethodTag} from "../../../util/tag-util";

const footer = <>
    <p style={{fontSize: "18px", fontWeight: "bold"}}>操作说明 : </p>
    <ul>
        <li>选择路径后, 点击提交修改按钮即可修改角色路径权限</li>
        <li>提交修改并后就不可以撤销到初始状态</li>
    </ul>
</>;

const RolePathComponent = () => {
    const role = useLocation().state as SecurityRole;
    const titleRender = (node: TreeDataNode) => {
        const {explain, method, server, title} = node as unknown as {explain: string, method: string, server: string, title: string};
        return <Space size={20}>
            <p style={{
                padding: 0,
                margin: 0,
                paddingInlineStart: "5px",
                paddingInlineEnd: "3px",
                width: "300px",
                // backgroundColor: "#222020",
            }}>{title}</p>
            <p style={{
                padding: 0,
                margin: 0,
                paddingInlineStart: "5px",
                paddingInlineEnd: "3px",
                width: "130px",
                maxWidth: "130px",
                overflow: "hidden",
                backgroundColor: "#2b2727",
                whiteSpace: "nowrap",
                textOverflow: "ellipsis",
                borderRadius: "6px"
            }}> {explain}</p>
            <Tag style={{width: "100px", textAlign: "center"}} color={"green"}>{server}</Tag>
            {getMethodTag(method)}
        </Space>;
    };
    return (
        <TreeEnhance
            titleRender={titleRender}
            title={"角色路径权限"}
            subText={role.authority}
            tagInfo={role.explain}
            backupText={"角色列表"}
            optionId={role.id}
            dataUrl={"/manager/admin/role-path/authority-tree/"}
            updateUrl={"/manager/admin/role-path/authority-tree"}
            refreshUrl={"/root/refresh/role-path/" + role.authority}
            footer={footer}
        />
    );
};

export default RolePathComponent;